<template>
  <div class="app-container">
    <basic-table 
    :table-title="tableTitle" 
    :data-source="dataSource" 
    :button-group="buttonGroup"
    :search-form="searchForm" 
    :model-type="'userManagement'" 
    :multiple-table="false" 
    :reload="reload"
    @closeReload="closeReload"
    >
      <template v-slot:userStatus="scope">
        <el-tag :type="scope.row.userStatus === 0 ? 'success' : 'danger'" size="mini" style="cursor: pointer;"
          @click="changeStatus(scope.row)">
          {{ scope.row.userStatus === 0 ? '已启用' : '已禁用' }}
        </el-tag>
      </template>
      <template v-slot:roleTitle="scope">
        <el-tag v-for="(item, index) in scope.row.role" :key="index" type="" size="mini" style="margin: 4px;">
          {{ item.roleTitle }}
        </el-tag>
      </template>

    </basic-table>
    <el-dialog :title="'新增'" :visible.sync="dialogFormVisible" top="3%" width="30%">
      <div class="el-dialog-div">
        <data-form :loading="loading" :temp="temp" @createDataEmit="createDataEmit"
          @dialogFormVisibleEmit="dialogFormVisibleEmit" />
      </div>
    </el-dialog>
    <el-dialog :title="'修改密码'" :visible.sync="dialogPasswordVisible" top="3%">
      <div class="el-dialog-div">
        <password-form :passwordtemp="passwordtemp" @createPassword="createPassword"
          @dialogPasswordVisibleEmit="dialogPasswordVisibleEmit" />
      </div>
    </el-dialog>
    <el-dialog :title="'修改权限'" :visible.sync="dialogAuthorityVisible" top="3%" width="40%">
      <div class="el-dialog-div">
        <authority-form :authoritytemp="authoritytemp" @createAuthority="createAuthority"
          @dialogAuthorityVisibleEmit="dialogAuthorityVisibleEmit" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import DataForm from '@/views/userManagement/components/dataForm.vue'
import PasswordForm from '@/views/userManagement/components/passwordForm.vue'
import AuthorityForm from '@/views/userManagement/components/authorityForm.vue'

import BasicTable from '@/components/BasicTable/index.vue'
import { addUser, getUserList, updateUserStatus, updateUserPwd, updateUserRole } from '@/api/user'
import { TipsBox } from '@/utils/feedback.js'
import { QueryBox } from '@/utils/feedback'
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'UserManagement',
  components: { BasicTable, DataForm, PasswordForm, AuthorityForm },
  data() {
    return {
      dialogFormVisible: false,
      dialogPasswordVisible: false,
      dialogAuthorityVisible: false,
      loading: false,
      reload: false,
      tableTitle: [
        {
          label: '用户',
          value: 'username',
          show: true,
          type: 'text'
        },
        {
          label: '所属公司',
          value: 'userCompany',
          show: true,
          type: 'text'
        },
        {
          label: '用户来源',
          value: 'userSource',
          show: true,
          type: 'text'
        },
        {
          label: '状态',
          value: 'userStatus',
          show: true,
          type: 'slot',
          slot: 'userStatus'
        },
        {
          label: '权限',
          value: 'roleTitle',
          show: true,
          type: 'slot',
          align: 'left',
          slot: 'roleTitle'
        },
        {
          label: '创建时间',
          value: 'createTime',
          show: true,
          type: 'text'
        },
        {
          label: '操作',
          show: true,
          type: 'options',
          align: 'left',
          options: [
            {
              text: '密码',
              icon: 'el-icon-edit-outline',
              type: 'success',
              clickEvent: (row) => {
                this.resetPasswordtemp()
                this.dialogPasswordVisibleEmit(true)
                this.passwordtemp.userId = row.id
              }
            },
            {
              text: '权限',
              icon: 'el-icon-edit-outline',
              type: 'primary',
              au: true,
              clickEvent: (row) => {
                this.resetAu()
                // // 企业不显示按钮怎么处理？
                // row.role.forEach(element => {
                //   if (element.roleId === 0) {
                //     this.dialogAuthorityVisibleEmit(false)
                //   } else {
                //     this.dialogAuthorityVisibleEmit(true)
                //   }
                // });
                this.dialogAuthorityVisibleEmit(true)
                this.authoritytemp.userId = row.id
                this.authoritytemp.role = row.role
              }
            }
          ]
        }
      ],
      dataSource: () => getUserList,
      temp: {
        username: '',
        userCompany: '',
        password: '',
        num: 10
      },
      passwordtemp: {
        newPassword: '',
        userId: ''
      },
      authoritytemp: {
        role: '',
        userId: ''
      },
      searchForm: {
        expend: true,
        title: '用户管理',
        fields: [
          {
            show: true,
            type: 'input',
            label: '用户名',
            labelShow: true,
            name: 'username'
          },
          {
            show: true,
            type: 'input',
            label: '所属公司',
            labelShow: true,
            name: 'userCompany'
          }
        ]
      },
      buttonGroup: {
        expend: true,
        title: '表格筛选',
        size: 'default',
        fields: [
          {
            showButtonGroup: true,
            type: 'text', // 文字按钮
            text: '新增',
            icon: 'el-icon-circle-plus-outline',
            callBack: () => {
              this.dialogFormVisibleEmit(true)
            }
          }
        ]
      }
    }
  },
  methods: {
    closeReload(val) {
      this.reload = val
    },
    createDataEmit(v) {
      this.loading = true
      addUser(v).then((res) => {
        this.loading = false
        if (res.code === 200) {
          TipsBox('success', res.message)
          this.dialogFormVisibleEmit(false)
          this.reload = true
        } else if (res.code === 500) {
          TipsBox('success', res.errors)
        }
      })
    },
    dialogFormVisibleEmit(v) {
      this.dialogFormVisible = v
    },
    // 4
    createPassword(v) {
      this.loading = true
      updateUserPwd(v).then((res) => {
        this.loading = false
        if (res.code === 200) {
          TipsBox('success', res.message)
          this.dialogPasswordVisibleEmit(false)
        }
      })
    },
    dialogPasswordVisibleEmit(v) {
      this.dialogPasswordVisible = v
    },
    createAuthority(v) {
      this.loading = true
      updateUserRole(v).then((res) => {
        this.loading = false
        if (res.code === 200) {
          TipsBox('success', res.message)
          this.dialogAuthorityVisibleEmit(false)
          this.reload = true
        }
      })
    },
    dialogAuthorityVisibleEmit(v) {
      this.dialogAuthorityVisible = v
    },
    resetPasswordtemp() {
      this.passwordtemp = {
        newPassword: '',
        userId: ''
      }
    },
    // 5
    changeStatus(v) {
      if (v.id === 1) {
        TipsBox('error', '不允许更改超级管理员信息')
        return
      }
      QueryBox('是否修改用户状态').then(() => {
        if (v.userStatus === 1) {
          v.userStatus = 0
        } else if (v.userStatus === 0) {
          v.userStatus = 1
        }
        const params = {
          userId: v.id
        }
        this.loading = true
        updateUserStatus(params).then((res) => {
          this.loading = false
          if (res.code === 200) {
            TipsBox('success', res.message)
            this.reload = true
          }
        })
      })
    },
    // 6
    operateEmit2() {
      this.resetTemp()
      this.dialogFormVisibleEmit(true)
    },
    resetTemp() {
      this.temp = {
        username: '',
        userCompany: '',
        password: ''
      }
    },
    resetAu() {
      this.authoritytemp = {
        role: '',
        userId: ''
      }
    }

  }
}
</script>
